<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
	<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
	<style>
	 .navbar-pink{
		background-color: #C36;
		border: 0;
		border-radius: 0;
		color:#fff;
		-webkit-box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		-moz-box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		margin-bottom:0px;
	 }
	 .navbar-nav li a{
	  color:#fff;
	 }
	 .navbar-nav li a:hover{
		background-color: #a30052;
	 }
	 #footer {
		background-color: #B30558;
		border-top: 1px solid #1c9971;
		color: #a5d8c7;
		text-shadow: 0 1px 0 rgba(0,0,0,0.15);
	 }
	 #footer-inner {
		max-width: 940px;
		margin: 0 auto;
		padding-bottom: 20px;
		overflow: hidden;
		position: relative;
		margin-top:50px;
	 }
	 .shareImg{
		width: 100%;
		height: 350px;
		margin: 10px auto;
		position: relative;
		background-image: url(./images/indexshare.jpg);
		background-position: center;
		background-repeat: no-repeat;
		margin-bottom: 20px;
	 }
	.nav-foot p.footer-links {
	  margin-bottom: 15px;
	}
	.frendlinks ul {
		list-style: none;
		overflow: hidden;
		margin: 0;
		background: rgba(37, 20, 20, 0.35);
		text-align: justify;
	}
	.frendlinks ul li {
		float: left;
		margin-right: 10px;
		height: 25px;
		line-height: 25px;
		overflow: hidden;
	}
	footer a,.frendlinks ul li a{
	    color:#fff;
	}
	a {
	    position:relative;
		z-index:999;
	}
	
	</style>
  </head>
  <body>
	<div class="header">
	  <div class="container">
		<h1>这个是头部</h1>
	  </div>
	</div>
    <div class="navbar navbar-pink" role="navigation"><!---add class "navbar-fixed-top"---->
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">网站首页</a></li>
            <li><a href="case.html">作品展示</a></li>
			<li><a href="theme.html">主题风格</a></li>
            <li><a href="pricing.html">套系报价</a></li>
			<li><a href="about.html">关于我们</a></li>
			<li><a href="about.html#contacter">联系我们</a></li> 
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <!-- Carousel ================================================== -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	  <!-- Indicators -->
	  <ol class="carousel-indicators">
		<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-example-generic" data-slide-to="1"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	  </ol>

	  <!-- Wrapper for slides -->
	  <div class="carousel-inner">
		<div class="item active">
		  <img src="./images/1.jpg" alt="...">
		  <div class="carousel-caption">
			...
		  </div>
		</div>
		<div class="item">
		  <img src="./images/2.jpg" alt="...">
		  <div class="carousel-caption">
			...
		  </div>
		</div>
		<div class="item">
		  <img src="./images/3.jpg" alt="...">
		  <div class="carousel-caption">
			...
		  </div>
		</div>
	  </div>

	  <!-- Controls -->
	  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left"></span>
	  </a>
	  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right"></span>
	  </a>
	</div><!-- /.carousel -->
	<div style="text-align:center;">
		<h2 class="text-align:center;" style="font-size:45px;font-weight: 700;letter-spacing: -1px;padding-top: 5px;">作品展示</h2>
	</div>
    <!-- Gallery 相册================================================== -->
	<div class="gallery" style="width:100%">
		<div class="row" style="margin:0;">
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;">
			<a href="" target="_blank"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></a></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s2.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		</div>
		<div class="row" style="margin:0;">
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s2.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		</div>
		<div class="row" style="margin:0;">
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s2.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		  <div class="col-md-2" style="padding-right: 1px;padding-left: 1px;"><img src="./images/s3.jpg" style="width:100%;margin-top:5px;" alt="..." ></div>
		</div>
		
    </div>
	
	<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
	<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" style="display: none;">
		<!-- The container for the modal slides -->
		<div class="slides"></div>
		<!-- Controls for the borderless lightbox -->
		<h3 class="title"></h3>
		<a class="prev">‹</a>
		<a class="next">›</a>
		<a class="close">×</a>
		<a class="play-pause"></a>
		<ol class="indicator"></ol>
		<!-- The modal dialog, which will be used to wrap the lightbox content -->
		<div class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" aria-hidden="true">&times;</button>
						<h4 class="modal-title"></h4>
					</div>
					<div class="modal-body next"></div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default pull-left prev">
							<i class="glyphicon glyphicon-chevron-left"></i>
							Previous
						</button>
						<button type="button" class="btn btn-primary next">
							Next
							<i class="glyphicon glyphicon-chevron-right"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!---links-->
	
	<div id="links">
		<a href="images/banana.jpg" title="Banana" data-gallery>
			<img src="images/s3.jpg" alt="Banana">
		</a>
		<a href="images/s1.jpg" title="Apple" data-gallery>
			<img src="images/s2.jpg" alt="Apple">
		</a>
		<a href="images/orange.jpg" title="Orange" data-gallery>
			<img src="images/s4.jpg" alt="Orange">
		</a>
		<a href="images/orange.jpg" title="Orange" data-gallery>
			<img src="images/s3.jpg" alt="Orange">
		</a>
		<a href="images/s2.jpg" title="Orange" style="display:none" data-gallery>
			<img src="images/s3.jpg" alt="Orange">
		</a>
	</div>
	
	<!--/.gallery--->


    <!--ads--->

	<div class="shareImg">
        <a href="/share.aspx" title=""></a>
    </div>
    <!--/.ads--->

	<footer id="footer" class="footer hidden-print">
		<div id="footer-inner">
			<div class="partners">
				<a href="http://www.net.cn" target="_blank" class="wanwang" rel="nofollow"></a>
				<a href="http://vdisk.weibo.com/" class="weipan" target="_blank" rel="nofollow"></a>
				<a href="http://weibo.com/uidesign" target="_blank" class="weibo" rel="nofollow"></a>
				<a href="http://t.qq.com/youshege" target="_blank" class="tweibo" rel="nofollow"></a>
				<a href="http://qiniutek.com/" target="_blank" class="qiniu" rel="nofollow"></a>
				<p style="clear:both;">特别鸣谢 <a href="http://www.net.cn" target="_blank" rel="nofollow">万网</a> 赞助主机，<a href="http://www.qiniutek.com" target="_blank">七牛</a> 赞助图片加速</p>
			</div>
			<div class="nav-foot">
			<p class="footer-links"><a href="http://uisdc.com/ad/" rel="nofollow">广告合作</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/duty/" rel="nofollow">免责声明</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/friendlink/" rel="nofollow">友情链接</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/contact/" rel="nofollow">联系我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/about/" rel="nofollow">关于我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://e.weibo.com/uidesign/" rel="nofollow">@优秀网页设计</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优设官方 QQ 群：<select style="display:inline;color:#000">
				<option class="fcg">181671383</option>
				<option class="fcr">87096978</option>
				<option class="fcr">192586823</option>
				<option class="fcr">158514561</option>
				<option class="fcr">216862992</option>
				<option class="fcr">124169968</option>
				<option class="fcr">96096993</option>
				<option class="fcr">199178798</option>
				<option class="fcr">79321884</option>
				<option class="fcr">244419297</option>
				<option class="fcr">193642837</option>
				<option class="fcr">179124119</option>
				<option class="fcr">172111170</option>
				<option class="fcr">277704164</option></select></p>
				<p class="credit">Copyright © 2013<strong> <a class="site-link" href="http://www.uisdc.com" title="优设-UISDC" rel="home"><span>优设-UISDC</span></a></strong> - 优秀网页设计联盟 Powered by <a class="wp-link" href="http://wordpress.org" title="State-of-the-art semantic personal publishing platform"><span>WordPress</span></a> and <a href="http://www.net.cn" rel="nofollow">中国万网</a> - <a target="_blank" href="http://www.miibeian.gov.cn">粤ICP备12017804号-1 </a></p>						<div style="display:none">
											<script>
												var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
						document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F7aeefdb15fe9aede961eee611c7e48a5' type='text/javascript'%3E%3C/script%3E"));
											</script><script src=" http://hm.baidu.com/h.js?7aeefdb15fe9aede961eee611c7e48a5" type="text/javascript"></script><a href="http://tongji.baidu.com/hm-web/welcome/ico?s=7aeefdb15fe9aede961eee611c7e48a5" target="_blank">网站统计</a>
										</div>
									</div>
		<div class="frendlinks"><h6>友情链接</h6>
			<ul class="frendlink-ul">
				
				<li><a href="http://www.hao123.com/" title="hao123上网导航" target="_blank">hao123上网导航</a></li>
				<li><a href="http://hao.uisdc.com/" title="设计师网址导航为优秀网页设计联盟（SDC）旗下最实用、最专业、最全面、最好用的设计师导航！" target="_blank">设计师网址导航</a></li>
				<li><a href="http://cdc.tencent.com/" rel="nofollow" title="腾讯用户研究与体验设计中心" target="_blank">腾讯CDC</a></li>
				<li><a href="http://ueo.baidu.com/" title="百度联盟事业部用户体验团队官方博客" target="_blank">百度联盟UEO</a></li>
				<li><a href="http://uxc.360.cn/" title="360用户体验设计中心" target="_blank">360用户体验设计</a></li>
				<li><a href="http://ued.taobao.com/" title="淘宝UED" target="_blank">淘宝UED</a></li>
				<li><a href="http://udc.weibo.com/" title="新浪微博设计团队" target="_blank">新浪微博设计团队</a></li>
				<li><a href="http://vc.changyou.com" rel="nofollow" title="搜狐畅游VC" target="_blank">搜狐畅游VC</a></li>
				<li><a href="http://www.hubei.com/" title="武汉生活第一门户，湖北网(hubei.com)是一个专门为武汉1000万武汉人提供武汉本地生活、消费信息、购物指导和情感交流的网上生活家园" target="_blank">湖北网</a></li>
				<li><a href="http://hao.qq.com/" title="QQ导航–腾讯旗下的网址导航，收录休闲生活相关的优秀网站，为您提供最便捷最安全的网址大全服务" target="_blank">QQ网址导航</a></li>
				<li><a href="http://hao.360.cn/" title="360安全网址导航" target="_blank">360安全网址导航</a></li>
				<li><a href="http://www.iconfans.org/" title="iconfans" target="_blank">iconfans</a></li>
				<li><a href="http://nav80.com/" title="Nav80设计师网址导航" target="_blank">Nav80网址导航</a></li>
				<li><a href="http://ux.etao.com/" title="一淘UX用户体验中心" target="_blank">一淘UX</a></li>
				<li><a href="http://ecd.tencent.com/" rel="nofollow" title="腾讯电商ecd" target="_blank">腾讯电商ecd</a></li>
				<li><a href="http://isux.tencent.com/" title="腾讯社交用户体验设计" target="_blank">腾讯ISUX</a></li>
				<li><a href="http://www.gn00.com/" target="_blank">技术宅社区</a></li>
				<li><a href="http://www.shejidaren.com/" title="谈谈网页设计、用户体验，聊聊前端开发，分享高质量设计资源和灵感，爱设计，爱分享" target="_blank">设计达人</a></li>
				<li><a href="http://shop62443992.taobao.com/" rel="nofollow" title="瓷言瓷语" target="_blank">设计师的陶瓷铺子</a></li>
				<li><a href="http://www.itnews001.com/" title="专业的IT科技、数码、电脑、软件硬件、手机、游戏、苹果、iphone、ipad、安卓、互联网、创意概念、设计资讯报道" target="_blank">IT资讯网</a></li>
				<li><a href="http://tgideas.qq.com/" title="腾讯游戏的专业设计团队" target="_blank">腾讯TGideas</a></li>
				<li><a href="http://pcedu.pconline.com.cn/sj/" target="_blank">PConline创意设计</a></li>
				</ul>
			</div>
		</div>
	</footer>
    <div id="snow" style="position:fixed;top:0;left:0;height:100%;width:100%;"></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
	<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
	<script src="js/bootstrap-image-gallery.js"></script>
	<script src="js/demo.js"></script>
	<script src="js/snow.js"></script>
	<script>
		$(function(){
			//下雪花
			init_snow();
			snow();
		});
	</script>
  </body>
</html>